import {
  AIHighlight,
  CharacterCount,
  CodeBlockLowlight,
  Color,
  CustomKeymap,
  GlobalDragHandle,
  HighlightExtension,
  HorizontalRule,
  MarkdownExtension,
  Placeholder,
  StarterKit,
  TaskItem,
  TaskList,
  TextStyle,
  TiptapImage,
  TiptapLink,
  TiptapUnderline,
  Twitter,
  UpdatedImage,
  Youtube,
  Mathematics,
} from "novel/extensions";
import { UploadImagesPlugin } from "novel/plugins";

import { Table } from '@tiptap/extension-table'
import { TableRow } from '@tiptap/extension-table-row'
import { TableHeader } from '@tiptap/extension-table-header'
import { TableCell } from '@tiptap/extension-table-cell'

import { cx } from "class-variance-authority";
import { common, createLowlight } from "lowlight";
import { TableToolbar } from "./TableToolbar";
import { IframeExtension } from './IframeExtension'

//TODO I am using cx here to get tailwind autocomplete working, idk if someone else can write a regex to just capture the class key in objects
const aiHighlight = AIHighlight;
//You can overwrite the placeholder with your own configuration
const placeholder = Placeholder;
const tiptapLink = TiptapLink.configure({
  HTMLAttributes: {
    class: cx(
      "text-muted-foreground underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer",
    ),
  },
});

const tiptapImage = TiptapImage.extend({
  addProseMirrorPlugins() {
    return [
      UploadImagesPlugin({
        imageClass: cx("opacity-40 rounded-lg border border-stone-200"),
      }),
    ];
  },
}).configure({
  allowBase64: true,
  HTMLAttributes: {
    class: cx("rounded-lg border border-muted"),
  },
});

const updatedImage = UpdatedImage.configure({
  HTMLAttributes: {
    class: cx("rounded-lg border border-muted"),
  },
});

const taskList = TaskList.configure({
  HTMLAttributes: {
    class: cx("not-prose pl-2 "),
  },
});
const taskItem = TaskItem.configure({
  HTMLAttributes: {
    class: cx("flex gap-2 items-start my-4"),
  },
  nested: true,
});

const horizontalRule = HorizontalRule.configure({
  HTMLAttributes: {
    class: cx("mt-4 mb-6 border-t border-muted-foreground"),
  },
});

const starterKit = StarterKit.configure({
  bulletList: {
    HTMLAttributes: {
      class: cx("list-disc list-outside leading-3 -mt-2"),
    },
  },
  orderedList: {
    HTMLAttributes: {
      class: cx("list-decimal list-outside leading-3 -mt-2"),
    },
  },
  listItem: {
    HTMLAttributes: {
      class: cx("leading-normal -mb-2"),
    },
  },
  blockquote: {
    HTMLAttributes: {
      class: cx("border-l-4 border-primary"),
    },
  },
  codeBlock: {
    HTMLAttributes: {
      class: cx("rounded-md bg-muted text-muted-foreground border p-5 font-mono font-medium"),
    },
  },
  code: {
    HTMLAttributes: {
      class: cx("rounded-md bg-muted  px-1.5 py-1 font-mono font-medium"),
      spellcheck: "false",
    },
  },
  horizontalRule: false,
  dropcursor: {
    color: "#DBEAFE",
    width: 4,
  },
  gapcursor: false,
});

const codeBlockLowlight = CodeBlockLowlight.configure({
  // configure lowlight: common /  all / use highlightJS in case there is a need to specify certain language grammars only
  // common: covers 37 language grammars which should be good enough in most cases
  lowlight: createLowlight(common),
});

const youtube = Youtube.configure({
  HTMLAttributes: {
    class: cx("rounded-lg border border-muted"),
  },
  inline: false,
});

const twitter = Twitter.configure({
  HTMLAttributes: {
    class: cx("not-prose"),
  },
  inline: false,
});

const mathematics = Mathematics.configure({
  HTMLAttributes: {
    class: cx("text-foreground rounded p-1 hover:bg-accent cursor-pointer"),
  },
  katexOptions: {
    throwOnError: false,
  },
});

const characterCount = CharacterCount.configure();

const markdownExtension = MarkdownExtension.configure({
  html: true,
  tightLists: true,
  tightListClass: 'tight',
  bulletListMarker: '-',
  linkify: false,
  breaks: false,
  transformPastedText: false,
  transformCopiedText: false,
});

const table = Table.configure({
  resizable: true,
  allowTableNodeSelection: true,
  lastColumnResizable: true, 
  handleWidth: 5,
  cellMinWidth: 100,
  // 移除handleClass配置，因为它不是Table扩展支持的选项
  HTMLAttributes: {
    class: cx('min-w-full border-collapse bg-white rounded-lg overflow-hidden border border-gray-200 relative'),
  },
  
});

const tableRow = TableRow.configure({
  HTMLAttributes: {
    class: cx('group/row'),
  },
});

const tableHeader = TableHeader.configure({
  HTMLAttributes: {
    class: cx(
      'border-b-2 border-r border-gray-200 bg-gray-100 p-3 text-left font-semibold text-gray-600',
      'first:rounded-tl-lg last:rounded-tr-lg',
      'group-hover/row:bg-gray-50',
      'hover:border-blue-300 hover:border-2',
      'selection:bg-blue-100',
      'group-focus-within:ring-2 group-focus-within:ring-blue-500 group-focus-within:z-10',
      'cursor-move select-none'
    ),
  },
});

const tableCell = TableCell.configure({
  HTMLAttributes: {
    class: cx(
      'p-3 border-b border-r border-gray-200 text-gray-700 align-middle relative',
      'group-hover/row:bg-gray-50',
      'selection:bg-blue-100',
      'hover:border-blue-300 hover:border-2',
      'focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500',
      'data-[column-selected=true]:bg-blue-50 data-[column-selected=true]:border-blue-400 data-[column-selected=true]:border-2',
      'data-[cell-selected=true]:bg-blue-100 data-[cell-selected=true]:border-blue-500 data-[cell-selected=true]:border-2',
      'cursor-move select-none',
       'cursor-col-resize'
    ),
  },
});



export const defaultExtensions = [
  starterKit,
  placeholder,
  tiptapLink,
  tiptapImage,
  updatedImage,
  taskList,
  taskItem,
  horizontalRule,
  aiHighlight,
  codeBlockLowlight,
  youtube,
  twitter,
  mathematics,
  characterCount,
  TiptapUnderline,
  markdownExtension,
  HighlightExtension,
  TextStyle,
  Color,
  CustomKeymap,
  GlobalDragHandle,
  table,
  tableRow,
  tableHeader,
  tableCell,
  TableToolbar,
  IframeExtension,
];
